{% extends "base.html" %}


{% block head %}
   <style type="text/css">
   .info-content {
          position: relative;
          background-color: #BDE5F8;
          border: 1px solid #999999;
          border: 1px solid rgba(0, 0, 0, 0.2);
          border-radius: 6px;
          outline: none;
          -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
                  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
          background-clip: padding-box;
      }
   .error-content {
          position: relative;
          background-color: #FFBABA;
          border: 1px solid #999999;
          border: 1px solid rgba(0, 0, 0, 0.2);
          border-radius: 6px;
          outline: none;
          -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
                  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
          background-clip: padding-box;
      }

    </style>
    <script>

    function  get_count(){
            var result_url="/progress_bar/".concat("add_count_",add_token)
            if  ( $('#wait_add').css("display") != "block" ){
                   window.clearInterval(interval_id)
            }
            $.get(result_url,function(data,status){
            var count_json=JSON.parse(data)
            var check_ok=count_json.check_ok
            var check_fail=count_json.check_fail
            var check_remain=count_json.check_remain
            var checked_count=parseInt(check_ok)+parseInt(check_fail)
            var total=parseInt(check_ok)+parseInt(check_fail)+parseInt(check_remain)
            var pt=parseInt(checked_count*100/total)
            if ( pt==0 || isNaN(check_fail) || isNaN(check_ok) ){
                pt=1;
            }
            var percentage=pt.toString().concat("%")
            if (isNaN(parseInt(check_fail)) || isNaN(parseInt(check_ok))){
                return false;
            }
            else{
                $('#display_count_text').text("Checked Success :  ".concat(check_ok,"  Checked Failed : ",check_fail,"  Remain :",check_remain))
                $('#checked_count').css("width",percentage)
                $('#display_count').text(percentage.concat(" Complete"))
            }
            console.log(percentage);
            });
    }

    $(document).ready(function(){
    $('#clusterid{{ clusterid }}').attr('selected','selected');
    $('#wait_add').on('shown.bs.modal', function () {
        interval_id = window.setInterval('get_count()',200)
    })


{% with OKs = get_flashed_messages(category_filter=["ok"]) %}
{% if OKs %}
    {% for msg in OKs %}
    show_info_refresh("OK","{{ msg }}")
    {% endfor %}
{% endif %}
{% endwith %}

{% with Errors = get_flashed_messages(category_filter=["error"]) %}
{% if Errors %}
    {% for msg in Errors %}
    show_error_refresh("Error","{{ msg }}")
    {% endfor %}
{% endif %}
{% endwith %}


    });

    function check_one_ip()
        {
        ip= /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/;
        ipaddress= $.trim($("#ipaddress").val());
        if (!ip.test(ipaddress))
        {
            show_error("error","You are editing One hosts ,It seems not to be a valid IP Address")
            $('#g_ipaddress').addClass("has-error");
            return false;
        }
        else
        {
            if($('#g_ipaddress').hasClass("has-error"))
            {
                $('#g_ipaddress').removeClass("has-error");
            }
            return true;
        }
    }

    function check_multi_ip()
        {
        ip= /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){2}\./;
        ipaddress= $.trim($("#ipaddress").val());
        if (!ip.test(ipaddress))
        {
            show_error("error","It seems not to be a valid IP Address")
            $('#g_ipaddress').addClass("has-error");
            return false;
        }
        ip_pool=ipaddress.replace(ip,"");
        seperator= new RegExp("[,-]")
        var pool=ip_pool.split(seperator)
        var single= /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
        for (x in pool){
            if (!single.test(pool[x])){
                show_error("error",'"'+pool[x]+"\" seems not to be a valid number in an IP address")
                $('#g_ipaddress').addClass("has-error");
                return false;
            }
        }
        if($('#g_ipaddress').hasClass("has-error"))
            {
                $('#g_ipaddress').removeClass("has-error");
            }
         return true;

    }

    function check_port()
        {
        port=/^\d+$/;
        serverport=$("#serverport").val();
        if (!port.test(serverport))
        {
            show_error("error","It seems not to be a valid port number")
            $('#g_port').addClass("has-error");
            return false;
        }
        else
        {
            if(serverport>65535 || serverport < 0)
            {
               show_error("error","Port Number out of range")
                $('#g_port').addClass("has-error");
                return false;
            }
            else
            {
                if($('#g_port').hasClass("has-error"))
            {
                $('#g_port').removeClass("has-error");
            }
                return true;
            }
        }

    }

    function check_other()
        {
        if ($("#password").val() =="")
        {
            show_error("error","Password can't be empty")
            $('#g_password').addClass("has-error");
            return false;
        }
        else
        {
            if($('#g_password').hasClass("has-error"))
            {
                $('#g_password').removeClass("has-error");
            }
        }
        return true;
    }

    function s10(){
        var data=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
        var result="";
        for(var i=0;i<10;i++){
           var r=Math.floor(Math.random()*52);
           result+=data[r];
         }
            return result
        }

    function select_change(){
        clusterid=$('#clusterid').val();
        runuser=$('#cid'+clusterid).attr('username');
        $('#username').val(runuser)
    }

    function check_select(){
       if (($('#clusterid').val()) == "0"){
           show_error("error","You must choose a cluster first !");
           $('#g_cluster').addClass("has-error");
           document.getElementById('clusterid').focus();
           return false
       }
        else{
           if($('#g_cluster').hasClass("has-error"))
            {
                $('#g_cluster').removeClass("has-error");
            }
       }
    }

    function show_table_content(content){
        content=JSON.parse(content);
        mytable='<table class="table table-hover"><thead><tr><th>IP address</th><th>Status</th></tr></thead><tbody>';
        for (var i=0;i< content.length;i++){mytable=mytable+'<tr data-toggle="tooltip" data-placement="top" title=\''+ content[i][2]+'\' id="rtr'+i+'" onmouseover="$(\'#rtr'+i+'\').tooltip(\'show\')"><td>'+content[i][0]+"</td><td>"+content[i][1]+"</td></tr>";}
        mytable=mytable+"</tbody></table>"
        return mytable

    }


    function add(direct){
        if ((!check_other()) || (!check_multi_ip()) || (!check_port()) )
        {
                return;
        }
        $('#addModal').modal('hide');
        var startDate= new Date()
        var datestring=startDate.getTime().toString()
        add_token=datestring.concat('_',s10())
        $('#wait_add').modal('show');
        $.ajax({
            url:"/add_host",
            type:"POST",
            data: {
            csrf_token:"{{ csrf_token() }}",
            ipaddress: $.trim($("#ipaddress").val()),
            username: $.trim($("#username").val()),
            password: $("#password").val(),
            serverport: $.trim($("#serverport").val()),
            rootpassword: $("#rootpassword").val(),
            clusterid:$('#clusterid').val(),
            direct:direct,
            comment:$("#comment").val(),
            enabled:$("#enabled").is(':checked'),
            audit:$("#audit").is(':checked'),
            add_token:add_token
        },
        dataType:"html",
        timeout:0,
        statusCode: {
        500: function() {
               $('#percentage_Modal').modal('hide');
               alert( "Sorry , something is wrong with octopus" );
        },
        400: function() {
               $('#percentage_Modal').modal('hide');
               alert( "Sorry , CSRF token expired or missing,please refresh this page" );
        }
        },
        success:function(data,status) {
            content = data;
            $('#wait_add').modal('hide');
            if (content == "success") {
                show_info_refresh("ok", "Added successfully");
            }
            else if (content.match("is already exist in database")) {
                show_error_refresh("error", content)
            }
            else {
                show_error_refresh("Here is the result:", show_table_content(content));
            }
        }
        })
    }

    function edit(direct){
        if ((!check_other()) || (!check_one_ip()) || (!check_port()) )
        {
                return;
        }
         $('#addModal').modal('hide');
         $('#wait_edit').modal('show');
         $.ajax({
            url:"/edit_one_host/"+$('#edit').attr('hostid'),
            type:"POST",
            data:{
            csrf_token:"{{ csrf_token() }}",
            ipaddress: $.trim($("#ipaddress").val()),
            username: $.trim($("#username").val()),
            password:$("#password").val(),
            serverport: $.trim($("#serverport").val()),
            rootpassword:$("#rootpassword").val(),
            clusterid:$('#clusterid').val(),
            direct:direct,
            comment:$("#comment").val(),
            enabled:$("#enabled").is(':checked'),
            audit:$("#audit").is(':checked'),
            add_token:"nothing"
            },
             dataType:"html",
             timeout:0,
             statusCode:{
                 500: function() {
                     $("wait_edit").modal('hide');
                     alert("Sorry , something is wrong with octopus");
                 },
                 400:function() {
                     $("wait_edit").modal('hide');
                     alert( "Sorry , CSRF token expired or missing,please refresh this page" );
                 }
             },
            success:function(data,status){
            content= data;
            $('#wait_edit').modal('hide');
            if (content == "success"){
               show_info_refresh("ok","Edited successfully");
            }
            else{
                content=content.replace(/\r\n/g,"<BR>");
                content=content.replace(/\n/g,"<BR>");
                show_error_refresh("unknown error",content);
            }
         }
        })
//        $.post("/edit_one_host/"+$('#edit').attr('hostid'),
//        {
//            csrf_token:"{{ csrf_token() }}",
//            ipaddress: $.trim($("#ipaddress").val()),
//            username: $.trim($("#username").val()),
//            password:$("#password").val(),
//            serverport: $.trim($("#serverport").val()),
//            rootpassword:$("#rootpassword").val(),
//            clusterid:$('#clusterid').val(),
//            direct:direct,
//            comment:$("#comment").val(),
//            enabled:$("#enabled").is(':checked'),
//            audit:$("#audit").is(':checked')
//        },
//        function(data,status){
//            content= data;
//            $('#wait').modal('hide');
//            if (content == "success"){
//               show_info_refresh("ok","Edited successfully");
//            }
//            else{
//                content=content.replace(/\r\n/g,"<BR>");
//                content=content.replace(/\n/g,"<BR>");
//                show_error_refresh("unknown error",content);
//            }
//         });
    }

    function show_edit(id,host_ip,username,server_port,clusterid,password,rootpassword,audit,enabled,commentid){
        $('#add').attr('id','edit')
        $('#add-direct').attr('id','edit-direct')
        $('#clusterid').val(clusterid),
        $("#ipaddress").val(host_ip) ;
        $("#serverport").val(server_port) ;
        $('#username').val(username);
        $("#password").val(password);
        $('#rootpassword').val(rootpassword);
        if (enabled == "True"){
             document.getElementById('enabled').checked=true;
        }
        else{
            document.getElementById('enabled').checked=false;
        }
        if (audit == "True"){
             document.getElementById('audit').checked=true;
        }
        else{
            document.getElementById('audit').checked=false;
        }
        comment=$(commentid).text();
        $("#comment").text(comment) ;
        $("#addModalLabel").text("Edit a  Host")
        $('#edit').attr('hostid',id);
        $('#edit-direct').attr('hostid',id);
        $('#edit').text('Check and Save changes');
        $('#edit-direct').text('Save changes without check');
        $('#edit').attr("onclick","edit('false')")
        $('#edit-direct').attr("onclick","edit('true')")
        $("#ipaddress").attr("onblur","check_one_ip()")
        $('#addModal').modal('show');
    }


    function show_add(){
        $('#edit').attr('id','add')
        $('#edit-direct').attr('id','add-direct')
        $('#clusterid').val(0);
        $("#ipaddress").val("") ;
        $("#serverport").val("22") ;
        $('#username').val("");
        $("#password").val("");
        $('#rootpassword').val("");
        document.getElementById('enabled').checked=true;
        document.getElementById('audit').checked=true;
        $("#comment").text("") ;
        $("#addModalLabel").text("Add a  Host")
        $('#add').text('Check and Add');
        $('#add-direct').text('Add without check');
        $('#add').attr("onclick","add('false')")
        $('#add-direct').attr("onclick","add('true')")
        $("#ipaddress").attr("onblur","check_multi_ip()")
        $('#addModal').modal('show');
    }

    function show_info_refresh(title,info) {
            $("#myinfoLabel_refresh").text(title) ;
            $("#myinfoContent_refresh").text(info) ;
            $(".error-content").addClass("info-content")
            $(".info-content").removeClass("error-content")
            $('#myinfo_refresh').modal({ keyboard: false });
    }
    function show_error_refresh(title,error) {
            $("#myinfoLabel_refresh").text(title) ;
            $("#myinfoContent_refresh").html(error) ;
            $(".info-content").addClass("error-content")
            $(".error-content").removeClass("info-content")
            $('#myinfo_refresh').modal({ keyboard: false });
    }

    function show_info(title,info) {
            $("#myinfoLabel").text(title) ;
            $("#myinfoContent").text(info) ;
            $(".error-content").addClass("info-content")
            $(".info-content").removeClass("error-content")
            $('#myinfo').modal({ keyboard: false });
    }
    function show_error(title,error) {
            $("#myinfoLabel").text(title) ;
            $("#myinfoContent").text(error) ;
            $(".info-content").addClass("error-content")
            $(".error-content").removeClass("info-content")
            $('#myinfo').modal({ keyboard: false });
    }

    function delete_confirm(id){
        if(confirm("Really want to delete this host ?")){
            location.href='/delete_one_host/'+id
        }
    }

    function select_cluster(clusterid){
        window.location.href('/manage_hosts/1/'+clusterid)
    }

    function check_hosts(){
        checked_status=$("input[name='check_all']").is(':checked');
        $("input[name='checked_host']").each(function() { this.checked = checked_status; });
    }
    function check_edit_hosts(){
        if  ($("#edit_hosts option:selected").val() == "delete_hosts") {
            $("#go").removeClass("btn-info")
            $("#go").addClass("btn-danger")
        }
        else{
            $("#go").removeClass("btn-danger")
            $("#go").addClass("btn-info")
        }
    }
    function edit_multi_hosts(){
        var csrf_token= jQuery("meta[name=csrf-token]").attr('content');
        var host_array= new Array()
        $("input[name='checked_host']:checkbox:checked").each(function(){
            host_array.push($(this).val())
        });
        if (host_array.length == 0) {
            alert(" You haven't select any host !");
            exit(1)
        }
        host_list=host_array.join(',');
        action=$("#edit_hosts option:selected").val();
        $.ajax({
            url:"/edit_multi_hosts",
            type:"POST",
            data:{
            csrf_token:"{{ csrf_token() }}",
            host_list:host_list,
            action:action
            },
            dataType:"html",
            timeout:0,
            statusCode:{
            500: function() {
               alert("Sorry , something is wrong with octopus");
            },
            400:function() {
               alert( "Sorry , CSRF token expired or missing,please refresh this page" );
                 }
            },
            success:function(data,status){
            content= data;
            alert(content)
            location.reload();
         }
        })

//         $.post("/edit_multi_hosts",
//        {
//            csrf_token:"{{ csrf_token() }}",
//            host_list:host_list,
//            action:action
//        },
//        function(data,status){
//            content= data;
//            alert(content)
//            location.reload();
//         });

    }
    </script>

    <style type="text/css">
    .btn-lg {

        float: right;
        padding: 10px 16px;
        font-size: 18px;
        line-height: 1.33;
        border-radius: 6px;
        }
    .Textarea {
        width:100%;
    }

</style>

{% endblock %}


        {% block body%}



 <div class="container">

     <h1>manage the hosts</h1>
{#      <div class="input-group" >#}
{#        <span class="input-group-addon"> Cluster&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#}
{#        </span>#}
{#        <select  name="cluster" class="form-control" id="cluster" onchange="javascript:location.href=this.value;">#}
{#            <option   username="user is decided by cluster">Click here to choose a cluster</option>#}
{#            <option id="clusterid0" value="/manage_hosts/1/0" >ALL</option>#}
{#            {% for cluster in clusters %}#}
{#            <option id="clusterid{{ cluster.clusterid }}" value="/manage_hosts/1/{{ cluster.clusterid }}" >{{ cluster.clustername }}</option>#}
{#            {% endfor %}#}
{#            </select>#}
{#      <span class="input-group-addon" >total hots : {{ hosts.total }}  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>#}
{#    </div>#}
    <form class="form-inline" role="form">
      <div class="form-group">
          Select a Cluster  Here &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      </div>
        <div class="form-group">
         <select  name="cluster" class="form-inline select input-sm" id="cluster" onchange="javascript:location.href=this.value;">
            <option id="clusterid0" value="/manage_hosts/1/0" >ALL</option>
            {% for cluster in clusters %}
            <option id="clusterid{{ cluster.clusterid }}" value="/manage_hosts/1/{{ cluster.clusterid }}" >{{ cluster.clustername }}</option>
            {% endfor %}
            </select>
        </div>
    <div class="form-group">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;total hosts in this cluster: {{ hosts.total }}
    </div>
    </form>
 <br>


      <table class="table table-hover">
        <thead>
          <tr>
            <th><input type="checkbox" name="check_all" onclick="check_hosts()" ></th>
            <th>Hosts Name</th>
            <th>Cluster</th>
            <th>Run As User</th>
            <th>Server Port</th>
            <th>audit</th>
            <th>enabled</th>
            <th>edit</th>
            <th>delete</th>
          </tr>
        </thead>
        <tbody>
        {% for host in hosts.items %}
          <tr data-toggle="tooltip" data-placement="top" title="{{ host.comment }}" id="tr{{ host.hostid }}"  onmouseover="$('#tr{{ host.hostid }}').tooltip('show')">
            <td><input type="checkbox" value="{{ host.hostid }}" name="checked_host" ></td>
            <td style="display: none;" hostid="id{{ host.hostid }}">{{ host.hostid }}</td>
            <td style="display: none;" clusterid="id{{ host.clusterid }}">{{ host.clusterid }}</td>
            <td style="display: none;" id="comment{{ host.hostid }}">{{ host.comment }}</td>
            <td>{{ host.host_ip }}</td>
            <td><script>document.write($('#clusterid{{ host.clusterid }}').text())</script></td>
            <td>{{ host.login_name }}</td>
            <td>{{ host.server_port }}</td>
            <td>{{ host.audit }}</td>
            <td>{{ host.enabled }}</td>
            <td><button type="button" class="btn btn-info" onclick="show_edit('{{ host.hostid }}','{{ host.host_ip }}','{{ host.login_name }}','{{ host.server_port }}','{{ host.clusterid }}','not_modified','not_modified','{{ host.audit }}','{{ host.enabled }}','#comment{{ host.hostid }}')">&nbsp; edit &nbsp;</button></td>
{#            <td><a href="delete_one_host/{{ host.hostid }}">delete</a> </td>#}
            <td><button type="button" class="btn  btn-danger" onclick="delete_confirm({{ host.hostid }})">delete</button></td>
          </tr>
        {%  endfor %}
        </tbody>
      </table>
      <div class="form-group">
         <select  name="edit_hosts" class="form-inline select input-sm" id="edit_hosts" onchange="check_edit_hosts()">
            <option  value="enable_audit" >Enable these audit</option>
            <option  value="disable_audit" >Disable these audit</option>
            <option  value="enable_hosts" >Enable these hosts</option>
            <option  value="disable_hosts" >Disable these hosts</option>
            <option  value="delete_hosts">Delete these hosts</option>
            </select>

     <button id="go" type="button" class="btn  btn-info" onclick="edit_multi_hosts()">Go !</button>
              </div>

 <ul class="pager">
      {% if hosts.has_prev %}<li><a href="{{ url_for('manage_hosts', page = hosts.prev_num,clusterid=clusterid) }}"><< Previous</a></li>{% else %}<li class="disabled"><a href="#"><< Previous</a></li>{% endif %} </li> |
      {% if hosts.has_next %}<li><a href="{{ url_for('manage_hosts', page = hosts.next_num,clusterid=clusterid) }}"> Next >></a></li>{% else %}<li class="disabled"><a href="#"> Next >></a></li>{% endif %} </li>
</ul>


 <!-- Button trigger modal -->
{# <div class="btn-group">#}
{#<button class="btn btn-primary btn-lg  dropdown-toggle" data-toggle="dropdown" >#}
{#  Add  hosts <span class="caret"></span>#}
{#</button>#}
{#        <ul class="dropdown-menu" role="menu">#}
{#          <li  onclick="show_add()"><a>Add a new host</a></li>#}
{#          <li class="divider"></li>#}
{#          <li><a>Add multi hosts</a></li>#}
{#        </ul>#}
{#</div>#}


 <button class="btn btn-primary btn-lg " data-toggle="modal" onclick="show_add()">
  Add  new hosts
</button>



<!-- Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;</button>
        <h4 class="modal-title" id="addModalLabel">Add a new host</h4>
      </div>
      <div class="modal-body">


<form method="post" action="" class="addhosts" name="form1">
    {{ form.csrf_token }}
    <!--{{ form.hidden_tag() }}-->

     <!--<div class="col-xs-3">-->

    <h5>start with "*" is required , others are optional</h5>
    <h5>if you are adding multi hosts ,you can use "," or "-" to separate it .</h5>
    <h5>for example : 192.168.1.10,14  or 192.168.1.20-100</h5>

    <div class="input-group" id="g_cluster">
        <span class="input-group-addon">* Cluster&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </span>
        <select  name="clusterid" class="form-control" id="clusterid" onchange="select_change()">
            <option value="0" id="cid0" username="user is decided by cluster">Click here to choose a cluster</option>
            {% for cluster in clusters %}
            <option id="cid{{ cluster.clusterid }}" value="{{ cluster.clusterid }}" username="{{ cluster.runuser }}" >{{ cluster.clustername }}</option>
            {% endfor %}
            </select>
    </div>
    <br>

   <div class="input-group" id="g_ipaddress">
  <span class="input-group-addon">*  IP address</span>
  {{form.ipaddress(class="form-control",placeholder="127.0.0.1" ,onblur="check_one_ip()")}}
   </div>


    <br>

   <div class="input-group " id="g_username">
  <span class="input-group-addon">* Username&nbsp;&nbsp;</span>
{#  {{form.username(class="form-control readonly" ,placeholder="user1")}}#}
   <input readonly class="form-control readonly" id="username" name="username" value="user is decided by cluster" type="text" value="">
   </div>


    <br>

   <div class="input-group" id="g_password">
  <span class="input-group-addon">* Password&nbsp;&nbsp;</span>
  {{form.password(class="form-control", placeholder="user1's password" ,onfocus="check_select()")}}
   </div>


    <br>

    <div class="input-group" id="g_port">
  <span class="input-group-addon">* SSH Port&nbsp;&nbsp;&nbsp;&nbsp;</span>
  {{form.serverport(class="form-control" , value="22", onblur="check_port()")}}
   </div>


    <br>

    <div class="input-group" id="g_rootpassword">
  <span class="input-group-addon">root Password</span>
  {{form.rootpassword(class="form-control" , placeholder="root's password (optional) ")}}
   </div>

   <br>

   <div class="checkbox-inline ">
    <label>
      {{ form.enabled }} Enabled
    </label>
  </div>

    <div class="checkbox-inline ">
    <label>
      {{ form.audit }} Audit
    </label>
  </div>

     <div class="input-group ">
  <span class="input-group-addon"> you can add some comment below :</span>

   </div>
           <textarea id="comment" class="form-control" wrap="wrap" rows="3"></textarea>

   <!--</div>-->
</form>



      </div>
      <div class="modal-footer">
        <button type="button" id="exit" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" id="add-direct" class="btn " onclick="add('true')">Add without check</button>
        <button type="button" id="add" class="btn btn-primary" onclick="add('false')">Check and Add</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>


 <div id="myinfo_refresh" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myinfoContent" aria-hidden="true">
      <div class="modal-dialog">
        <div class="info-content">
          <div class="modal-header">
            <button type="button" onclick="window.location.reload()" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myinfoLabel_refresh">Modal Heading</h4>
          </div>
          <div class="modal-body">
            <h4 id="myinfoContent_refresh">Overflowing text </h4>
          </div>
          <div class="modal-footer">
            <button type="button" onclick="window.location.reload()"  class="btn btn-default" data-dismiss="modal">OK</button>
          </div>

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


  <div id="myinfo" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myinfoContent" aria-hidden="true">
      <div class="modal-dialog">
        <div class="info-content">
          <div class="modal-header">
            <button type="button"  class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myinfoLabel">Modal Heading</h4>
          </div>
          <div class="modal-body">
            <h4 id="myinfoContent">Overflowing text</h4>
          </div>
          <div class="modal-footer">
            <button type="button"   class="btn btn-default" data-dismiss="modal">OK</button>
          </div>

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

  <div class="modal fade" id="wait_add">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Please wait....</h4>
      </div>
      <div class="modal-body">
      <div class="progress progress-striped active">
            <div class="progress-bar"  role="progressbar" id="checked_count" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 1%">
                <span id="display_count">45% Complete</span>
            </div>
        </div>
       <span id="display_count_text"></span>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>

  <div class="modal fade" id="wait_edit">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Please wait....</h4>
      </div>
      <div class="modal-body">
      <div class="progress progress-striped active">
            <div class="progress-bar"  role="progressbar" id="checked_count" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 1%">
                <span id="display_count">45% Complete</span>
            </div>
        </div>
       <span id="display_count_text"></span>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>


        {% endblock %}